<template>
 <div class="myorder-wrapper"  v-loading="loading">
  <template v-if="lists.length">
    <div class="orderinfo-item" v-for="(item,index) in lists" :key="item.id">
      <!-- 标题 -->
      <div class="orderinfo-caption">
        <div class="order-time">
          <span>下单时间:</span>
          <span class="text-over">{{switchDate(item.createTime)}}</span>
        </div>
        <div class="order-number">
          <span>订单号:</span>
          <span  class="text-over">{{item.orderNo}}</span>
        </div>
        <div class="linkman">
          <span>联系人:</span>
          <span  class="text-over">{{item.contactName}}</span>
        </div>
        <div class="phone-number">
          <span>手机号码:</span>
          <span  class="text-over">{{item.contactMobile}}</span>
        </div>
        <div class="consignee">
          <a  class="text-over" :href="item.contactAttach">下载收货人信息表</a>
        </div>
      </div>
      <!-- 商品信息 -->
      <div class="merchant-info">
        <div class="merchant-info-left">商品信息</div>
        <div class="merchant-info-right">
          <div class="merchant-single-price">单价</div>
          <div class="merchant-number">数量</div>
          <div class="merchant-count">小计</div>
          <div class="merchant-payment">实付</div>
          <div class="merchant-status">订单状态</div>
          <div class="merchant-operation">操作</div>
        </div>
      </div>
      <!-- 图文列表 -->
      <div class="merchant-info merchant-img-text">
        <div class="merchant-info-left">
          <img :src="item.goodsUrl" alt="">
          <p class="merchant-brief">{{item.goodsName}}</p>
        </div>
        <div class="merchant-info-item">
          <div class="merchant-single-price">￥ {{item.goodsPrice}}</div>
          <div class="merchant-number">{{item.amount}}</div>
          <div class="merchant-count">￥ {{item.sumMoney}}</div>
          <div class="merchant-payment color1">￥ {{item.payMoney}}</div>
          <div class="merchant-status" v-if="item.status === '0'" :class="payStatusColor(item)">待付款</div>
          <div class="merchant-status" v-if="item.status === '1'" :class="payStatusColor(item)">已付款</div>
          <div class="merchant-status" v-if="item.status === '3'" :class="payStatusColor(item)">已取消</div>
          <div
            :style="{'visibility':item.status === '1' ?'hidden' :'visible'}"
            class="merchant-operation cancel-order"
            @click="cancelOrder(index,item)"
            :class="changeIndex === index ? 'active':''"
          >
         {{isShowOrderText(item.status)}}</div>
        </div>
      </div>
    </div>
  </template>
  <div class="no-wrap" v-if="!lists.length">暂时还没有订单哦！</div>
  <!-- 分页 -->
  <div class="pagination">
		<el-pagination
			background
			:current-page = "pageNum"
			@current-change="changeCurrentPage"
			:page-sizes="[8,16,24]"
			@size-change="changeCurrentPageSize"
			:total = "total"
			layout="total, sizes, prev, pager, next, jumper"
		>
		</el-pagination>
    <div class="pageSearch" @click="pageSearch">确定</div>
  </div>
  <!-- <Loading v-show="loading"></Loading> -->
 </div>
</template>

<script>
// import Loading from '../../components/Loading.vue'
export default {
  async fetch({store}){
    store.commit('setPromoteIndex', 2)
  },
  components:{
    // Loading
  },
  data () {
    return {
      //订单数据
      lists:[],
      //第一页
      pageNum:1,
      //每页的条数
      pageSize:10,
      //总条数
      total:0,
      //页面加载效果
      loading:true, 
      //切换按钮的状态
      changeIndex:-1, 
      //订单ID
      orderId:0,
      text:'取消订单',
      text1:'重新下单',
    }
  },
  mounted(){
    this.orderList(); //调用商品列表接口
  },
  computed:{
    //时间戳转换为正常日期
    switchDate(){
      return function (val){
        var timeStamp = new Date(val);
        return timeStamp.toLocaleDateString().replace(/\//g, "-") + " " + timeStamp.toTimeString().substr(0, 8)
      }
    },
    //付款状态   0待付款 red  1已付款green  2已取消 red
 	  payStatusColor(){
			return function(item){
				return {
					'color1':item.status === '0',
					'color3':item.status === '1',
					'color2':item.status === '3',
				}
			}
    },
    //判断是否下单
    isShowOrderText(){
      return function(status){
        if(status==="0"){
          return "取消订单"
        }else if(status ==="3"){
          return "重新下单"
        }
      }
    }
  },
  methods:{
    //订单信息接口interface
    orderList(){
      this.loading = true;
      let params ={
        pageNum:this.pageNum, //页数
        pageSize:this.pageSize, //每页的条数
      }
      this.$axios.$post('orderList',params).then(res => {
        if(res.status === 200){
          this.lists = res.obj.list;
          this.total = res.obj.total;
          this.loading = false;
        }else{
          this.$message.warning(res.msg);
        }
      })
      .catch(error => {
        this.$message.warning('请求失败');
        this.loading = false;
      })
    },
    changeCurrentPage(page){ //改变当前页数
      this.pageNum = page; //赋值给当前页
      this.orderList(); //调用商品列表接口
      this.$scrollTo()
    },
    changeCurrentPageSize(pageSize){ //改变条数
      this.pageNum = 1; //重新请求第一页
      this.pageSize = pageSize;  //设置条数
      this.orderList();//调用商品列表接口
      this.$scrollTo();
    },
    pageSearch(){ //点击确定按钮时候调用分页事件
      this.orderList();//调用商品列表接口
      this.$scrollTo();
    },
    // 取消订单
    cancelOrder(index,item){
      console.log("取消订单")
      //拿到订单状态
      let status = item.status;
      //拿到订单ID
      let orderId = item.id;
      //拿到商品ID
      let goodsId = item.goodsId;
      //取消订单传递的参数
      let params = {
        orderId,
      }
      console.log('params',params)
      if(this.changeIndex === index){
        this.changeIndex = -1;
      }else{
        this.changeIndex = index;
        this.judgeStatus(status,params)
        if(item.status === "3"){
            this.$router.push({
            path:'/placeOrder',
            query:{goodsId:goodsId}
          })
        }
      }
    },
    //判断状态
    judgeStatus(status,params){
      if(status === '0'){ //待付款,我们才调接口
        this.popUp(params)
      }
    },
    //判断状态弹框
    popUp(params) {
      this.$confirm('您确定要取消订单吗？', '提示', {
        confirmButtonText: '提交',
        cancelButtonText: '再想想',
        type: 'warning',
        center: true
      }).then(() => {
        this.cancelOrderIntFac(params)
        this.changeIndex = -1;
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消失败',
          duration:500,
        });
        this.changeIndex = -1;
      });
    },
    //取消订单接口interface
    cancelOrderIntFac(params){
      this.loading = true;
      this.$axios.$post('cancelOrder',params).then(res => {
        this.loading = false;
        if(res.status === 200){
          if(this.test){
            this.test.close()
          }
          this.$message({
            message:res.msg,
            type:'success',
            duration:1500,
          })
          this.orderList();
        }else{
          this.$message.warning(res.msg);
        }
      })
      .catch(error => {
        this.$message.warning('请求失败');
        this.loading = false;
      })
    },
  },
}
</script>

<style scoped>
  .myorder-wrapper{
    background-color: #fff;
    padding:0 20px 20px;
    overflow:hidden;
  }
  .orderinfo-item{
    height:200px;
    border:1px solid #e1e1e1;
    box-sizing:border-box;
    margin-top:20px;
  }
  .orderinfo-caption{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:30px;
    background-color: #f8f9fb;
    padding:0 20px;
  }
  .order-time,
  .order-number,
  .linkman,
  .phone-number{
    width: 22%;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .order-time{
    width:29%;
  }
  .linkman{
    width:16%;
  }
  .phone-number{
    width:18%;
  }
  .consignee{
    width:calc(100%-88%);
    color: #0096e6;
}
  .text-over{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    margin-left:5px;
    color:inherit;
    cursor:pointer;
  }
  .consignee a:hover{
   color: #66B1FF;
  }
  /* 商品信息 */
  .color1{
    color:#e01222;
  }
  .color2{
    color:#e01222;
  }
  .color3{
    color:#20ba39;
  }
  .color4{
    color:#20ba39;
  }
  
  .merchant-info{
    height:44px;
    display:flex;
    align-items:center;
    padding: 0 20px;
    /* background-color: #f60; */
  }
  .merchant-info-left{
    flex-basis:50%;
    display:flex;
  }
  /* .merchant-h{
    height:44px;
  } */
  .merchant-info-right,
  .merchant-info-item{
    flex-basis:50%;
    display:flex;
    justify-content: space-between;
    text-align: center;
  }
  .merchant-info-item{
    height:30px;
    align-items:center;
    padding-bottom:53px;
  }
  .merchant-single-price{
    width:13%;
  }
  .merchant-single-price{
    width:12%;
  }
  .merchant-number{
    width: 13%;
  }
  .merchant-count{
    width:13%;
    color:
  }
  .merchant-payment{
    width:13%;
  }
  .merchant-status{
    width:14%;
  }
  .merchant-operation{
    width:15%;
  }
  .merchant-img-text{
    height:120px;
  }
  .merchant-info-left img{
    width: 113px;
    height: 113px;
    display:block;
    flex-shrink:0;
  }
  .merchant-brief{
    font-size: 14px;
    flex:1;
    margin-top:20px;
    margin-left:20px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    text-overflow:ellipsis;
    overflow:hidden;
    line-height:1.3;
  }
  .cancel-order{
    height:30px;
    line-height: 30px;
    background-color: #f0f9fe;
    color:#0096e6;
    border-radius:15px;
    cursor:pointer;
    user-select:none;
  }
  .merchant-info-item .active,
  .cancel-order:hover{
    background-color: #0096e6;
    color:#ffffff;
  }
  /* 分页样式 */
  .pagination{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    margin:20px 0 50px 0;
  }
  .pagination .pageSearch{
    width:60px;
    height:28px;
    line-height:28px;
    text-align:center;
    border-radius:15px;
    background:#0096e6;
    color:#ffffff;
    font-size:14px;
    cursor:pointer;
    margin-left:10px;
    user-select:none;
  }
  .pagination .pageSearch:hover{
    background:#66B1FF;
  }
  .no-wrap{
    width:100%;
    height:60px;
    line-height: 60px;
    text-align:center;
    color: #999999;
    margin-bottom:20px;
    letter-spacing:1px;
    font-size: 16px;
  }
</style>
